<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c'%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script language="javaScript" type="text/javascript"
	src="<c:url value='/cal/calendar.js'/>">
	
</script>

<link href="<c:url value='/cal/calendar.css'/>" rel="stylesheet"
	type="text/css">
<link href="<c:url value='/Styles/style.css'/>" rel="stylesheet"
	type="text/css" />

</head>
<body>
	<div class="page">
		<div id="header-wrapper">
			<div id="header">
				<div id="logo">
					<!-- Header -->

					<h4>&nbsp;</h4>
				</div>
			</div>
		</div>

		<div class="page-wrapper">
			<div class="main">
				<div class="colleft">
					<div class="col1">
						<!-- Side menu -->
						<h4><%@ include file="staff-logout.jsp"%></h4>
						<h4><%@ include file="employee-menu.jsp"%></h4>
						<h4>&nbsp;</h4>
					</div>
					<div class="col2">
						<!-- Main Content -->
						<h1>Submit Leave Form</h1>
						
									<h3>${msg }</h3>			
						<form action="SubmitLeaveServlet" method="POST">
							<table cellpadding="3" cellspacing="0" border="0">
								<tr>
									<td valign="top">From</td>
									<td valign="top">
									<input type="text" name="from"
										maxlength="20" size="20">
									<a
										href="#"
										onClick="setYears(2005, 2012);
       									showCalender(this, 'from');">									
									<img src="http://www.villamundo.net/img/casamundo/icons/calendar.png" alt="cal" width="20" height="20">
									</a>
									</td>	
								</tr>
								<tr>	
									<td valign="top">To</td>
									<td valign="top"><input type="text" name="to"
										maxlength="20" size="20">
									<a
										href="#"
										onClick="setYears(2005, 2012);
       									showCalender(this, 'to');">									
											<img src="http://www.villamundo.net/img/casamundo/icons/calendar.png" alt="cal" width="20" height="20">
									</a>
										
									</td>
								</tr>
								<tr>
									<td valign="top">Reason</td>
									<td valign="top"><textarea rows="5" cols="20"
											name="reason"></textarea></td>
								</tr>

								<tr>
									<td valign="top">LeaveNature</td>
									<td valign="top"><input type="text" name="leaveNature"
										maxlength="20" size="20"></td>
								</tr>

								<tr>
									<td valign="top">Work Dissemination</td>
									<td valign="top"><input type="text"
										name="workDissemination" maxlength="20" size="20"></td>
								</tr>

								<tr>
									<td valign="top">Contact Details</td>
									<td valign="top"><textarea rows="5" cols="20"
											name="contactDetails"></textarea></td>
								</tr>

								<tr>
									<td valign="top">Leave type</td>
									<td valign="top"><input type="radio" name="leaveType"
										value="Medical Leave">Medical <br> <input
										type="radio" name="leaveType" value="Annual Leave">Annual
										<br> <input type="radio" name="leaveType"
										value="Compensation Leave">Compensation <br></td>
								</tr>
								<tr>
									<td align="center" colspan=2><input type="submit"
										value="submit"> <input type="Button" value="Reset">
									</td>
								</tr>

							</table>
						</form>
<!-- Calender Script  -->

						<table id="calenderTable">
							<tbody id="calenderTableHead">
								<tr>
									<td colspan="4" align="center"><select
										onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
	           							this.selectedIndex, false));"
										id="selectMonth">
											<option value="0">Jan</option>
											<option value="1">Feb</option>
											<option value="2">Mar</option>
											<option value="3">Apr</option>
											<option value="4">May</option>
											<option value="5">Jun</option>
											<option value="6">Jul</option>
											<option value="7">Aug</option>
											<option value="8">Sep</option>
											<option value="9">Oct</option>
											<option value="10">Nov</option>
											<option value="11">Dec</option>
									</select></td>
									<td colspan="2" align="center"><select
										onChange="showCalenderBody(createCalender(this.value, 
										document.getElementById('selectMonth').selectedIndex, false));"
										id="selectYear">
									</select></td>
									<td align="center"><a href="#" onClick="closeCalender();"><font
											color="#003333" size="+1">X</font>
									</a></td>
								</tr>
							</tbody>
							<tbody id="calenderTableDays">
								<tr style="">
									<td>Sun</td>
									<td>Mon</td>
									<td>Tue</td>
									<td>Wed</td>
									<td>Thu</td>
									<td>Fri</td>
									<td>Sat</td>
								</tr>
							</tbody>
							<tbody id="calender"></tbody>
						</table>

<!-- End Calender Script  -->
						<h4>&nbsp;</h4>
					</div>
					<!-- end col2 -->

				</div>
				<!-- end colleft -->

			</div>
			<!-- end main -->

		</div>
		<!-- end page-wrapper -->

	</div>
	<!-- end page -->

</body>
</html>